import React, { Component } from 'react'
import { Layout, Menu, Icon, Dropdown, Avatar, Badge } from 'antd'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { getNotificationList } from '../../actions/notifications'
import { logout } from '../../actions/user'

import './frame.less'
import logo from '../../assets/login.jpg'
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout

const mapState = state => {
  return {
    notificationsCount: state.notifications.list.filter(item => item.hasRead === false).length,
    avatar: state.user.avatar,
    displayName: state.user.displayName
  }
}
@connect(mapState, { getNotificationList, logout })
@withRouter
class Frame extends Component {
  constructor(props) {
    super()
    this.state = {
        path: '/admin/dashboard',
    }
  }
  componentDidMount () {
    this.props.getNotificationList()
    this.setState({
      path: this.props.history.location.pathname,
    })
  }
  onMenuClick = ({ key }) => {
    this.props.history.push(key)
  }
  
  onDropdownMenuClick = ({ key }) => {
    if (key === '/logout') {
      this.props.logout()
    } else {
      this.props.history.push(key)
    }
  }

  renderDropdown = () => (
    <Menu onClick={this.onDropdownMenuClick}>
      <Menu.Item
        key="/admin/notifications"
      >
        <Badge dot={Boolean(this.props.notificationsCount)}>
          通知中心
        </Badge>
      </Menu.Item>
      <Menu.Item
        key="/admin/profile"
      >
        个人设置
      </Menu.Item>
      <Menu.Item
        key="/logout"
      >
        退出登录
      </Menu.Item>
    </Menu>
  )

  render() {
    return (
      <Layout style={{minHeight: '100%'}}>
        <Header className="header my-header">
          <div className="my-logo">
            <img src={logo} alt="学旅家"/>
          </div>
          <div>
          <Dropdown overlay={this.renderDropdown()}>
              <div style={{display: 'flex', alignItems: 'center'}}>
                <Avatar src={this.props.avatar} />
                <span>欢迎您！{this.props.displayName}</span>
                <Badge count={this.props.notificationsCount} offset={[-10, -10]}>
                  <Icon type="down" />
                </Badge>
              </div>
          </Dropdown>
          </div>
        </Header>
        <Layout>
          <Sider width={200} style={{ background: '#fff' }}>
        <Menu
          mode="inline"
          defaultSelectedKeys={[this.state.path]}
          defaultOpenKeys={['infomation']}
          style={{ height: '100%', borderRight: 0 }}
        >
          <SubMenu key="infomation"  title="综合信息"  onClick={this.onMenuClick}>
          {
                this.props.menus.map(item => {
                  return (
                    <Menu.Item key={item.pathname}>
                      <Icon type={item.icon} />
                      {item.title}
                    </Menu.Item>
                  )
                })
              }
          </SubMenu>
          <SubMenu key="sub2"  title="subnav 2">
            <Menu.Item key="5">option5</Menu.Item>
            <Menu.Item key="6">option6</Menu.Item>
            <Menu.Item key="7">option7</Menu.Item>
            <Menu.Item key="8">option8</Menu.Item>
          </SubMenu>
          <SubMenu key="sub3" title="subnav 3">
            <Menu.Item key="9">option9</Menu.Item>
            <Menu.Item key="10">option10</Menu.Item>
            <Menu.Item key="11">option11</Menu.Item>
            <Menu.Item key="12">option12</Menu.Item>
          </SubMenu>
        </Menu>
          </Sider>
          <Layout style={{ padding: '16px' }}>
            <Content
              style={{
                background: '#fff',
                margin: 0
              }}
            >
              {this.props.children}
            </Content>
          </Layout>
        </Layout>
      </Layout>
    )
  }
}
export default Frame